<template>
  <div class="micro-map" id="">
    <div id="map" class="micro-map">
      <map-control></map-control>
    </div>
  </div>
</template>

<script>
  // eslint-disable-next-line no-unused-vars
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import sgisLayerBase from "@/utils/map/sfgis.layer.base.js";
import sgisRegionBase from "@/utils/map/sfgis.region.base.js";
import mapTool from "@/utils/map/sfgis.map.tool.js";
import Layer from "@/utils/map/lib/main.js";
import MapControl from "./mapControl.vue";
import data from "./data/data.js";

import { mapState, mapMutations } from "vuex";
import { debug } from 'util';
export default {
  name: "Layer",
  props:[],
  data() {
    return {
      color1: "#409EFF",
      layers: [],
      selectlayer: "",
      map: ""
    };
  },
  components: { MapControl},
  mounted() {
    this.loadMap(); // 添加地图底图
  },
  computed: {
      ...mapState({
        showMapTableLayer: state => state.micro.showMapTableLayer,
        showEchartsLayer: state => state.micro.showEchartsLayer
      })
    },
  methods: {
    ...mapMutations(["changeShowMapControl","changeShowEchartsLayer","changeShowMapTableLayer"]),
    loadMap() {
      sgisMapBase.init("map");
      sgisLayerBase.init(data.map);
      //初始化一下区划配置信息
      sgisRegionBase.regionCatalog.setRegionCatalogs(data.regioncatalogs.data);
    },
    closeMain(type){
      if(type == "echarts"){
        this.$store.commit("changeShowEchartsLayer", false);
      }else if(type == "map"){
        this.$store.commit("changeShowMapControl",false)
      }else{
        this.$store.commit("changeShowMapTableLayer", false);
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.micro-map {
  width: 100%;
  height: 100%;
  background:rgba(30,84,111,0.7);
  // background:-webkit-gradient(linear, 0% 0%, 0% 20%,from(#1E546F), to(#1E546F));/*谷歌*/
}
</style>
<style rel="stylesheet/scss" lang="scss">
  .marker-popup-searchInfo {
    z-index: 200;
    .mapboxgl-popup-content{
      padding: 15px;
    }
    .mapboxgl-popup-close-button{
      font-size: 24px;
      color: #3498db;
    }
    .popupInfo{
      .title{
        font-size: 1.4rem;
        // border-bottom: 1px solid #ddd;
        font-weight: bold;
      }
    }
    .allInfo{
      font-size: 0.7em;
      margin: 5px 0;
    }
    .popup-todo{
      cursor: pointer;
      color: #3498db;
      margin-top: 8px;
      border-bottom: 1px solid #ddd;
      #showMore{
            float: right;
      }
    }
    .mapqueryInfo{
      display: inline-block;
      .radio-group{
        margin-top: 12px;
        margin-bottom: 6px;
      }
      input[type=text]{
        width: 150px;
        float: left;
        height: 19px;
      }
      button{
        float: left;
      }
    }
  }
</style>
